{% extends 'base.html' %}

{% block title %}宠物列表{% endblock %}

{% block content %}
    <h1 class="mb-4">待领养宠物</h1>

    <!-- 筛选表单 -->
    <form method="get" class="mb-4">
        <div class="row g-3">
            <div class="col-md-4">
                <select name="type" class="form-select" onchange="this.form.submit()">
                    <option value="">所有类型</option>
                    {% for type in pet_types %}
                        <option value="{{ type.id }}" {% if request.GET.type == type.id|stringformat:"i" %}selected{% endif %}>
                            {{ type.name }}
                        </option>
                    {% endfor %}
                </select>
            </div>
            <div class="col-md-4">
                <select name="status" class="form-select" onchange="this.form.submit()">
                    <option value="available" {% if request.GET.status == 'available' %}selected{% endif %}>可领养</option>
                    <option value="pending" {% if request.GET.status == 'pending' %}selected{% endif %}>审核中</option>
                    <option value="adopted" {% if request.GET.status == 'adopted' %}selected{% endif %}>已领养</option>
                </select>
            </div>
        </div>
    </form>

    <!-- 宠物卡片 -->
    <div class="row">
        {% for pet in pets %}
            <div class="col-md-4 pet-card">
                <div class="card h-100">
                    <img src="{{ pet.image.url }}" class="card-img-top pet-img" alt="{{ pet.name }}">
                    <div class="card-body">
                        <h5 class="card-title">{{ pet.name }}</h5>
                        <p class="card-text">
                            类型：{{ pet.type.name }} | 年龄：{{ pet.age }}岁 | 性别：{{ pet.get_gender_display }}<br>
                            状态：<span class="{% if pet.status == 'available' %}text-success{% elif pet.status == 'adopted' %}text-secondary{% else %}text-warning{% endif %}">
                                {{ pet.get_status_display }}
                            </span>
                        </p>
                        <a href="{% url 'pet_detail' pet.id %}" class="btn btn-primary">查看详情</a>
                    </div>
                </div>
            </div>
        {% empty %}
            <div class="col-12 text-center py-5">
                <p class="text-muted">暂无符合条件的宠物</p>
            </div>
        {% endfor %}
    </div>
{% endblock %}